<ui:composition template="template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:param name="pageTitle" value="ReviewIt" />
	<ui:param name="pageName" value="page-index" />
	<ui:param name="pageDescription" value="" />
	<ui:param name="pageKeywords" value="reviewit" />
	<ui:param name="pageAuthor" value="ReviewIt" />

	<ui:define name="css">
		<link rel="stylesheet" href="css/bubble_effect.css" />
	</ui:define>

	<ui:define name="header">
		<div class="show-for-small contain-to-grid sticky">
			<nav class="top-bar">
	  			<ul class="title-area">
			    	<!-- Title Area -->
			    	<li class="name">
			     		<h1><a href="index.xhtml"><img src="images/reviewit_white.png" alt="ReviewIt" /></a></h1>
			   		</li>
			    	<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
			  	</ul>
			  	<section class="top-bar-section">
	  		 		<ul class="right">
			      		<li class="divider"></li>
		              	<li>
		              		<h:panelGroup rendered="#{userSessionBean.isLogged}">
								<a href="#" data-reveal-id="dlg-upload-doc">Enviar Documento</a>
							</h:panelGroup>
						</li>
						<li><a href="documents.xhtml">Documentos</a></li>
						<li><a href="users.xhtml">Usuários</a></li>
						<h:panelGroup rendered="#{not userSessionBean.isLogged}">
			      			<li class="divider"></li>
							<li><a href="#" data-reveal-id="dlg-login">Entrar</a></li>
							<li><a href="plans.xhtml">Registre-se</a></li>
						</h:panelGroup>
						<h:panelGroup rendered="#{userSessionBean.isLogged}">
			      			<li class="divider"></li>
						 	<li class="has-dropdown">
						 		<a href="#">Perfil</a>
						 		<ul class="dropdown">
									<li><a href="documents.xhtml?user_id=${userSessionBean.user.id}">Meus Documentos</a></li>
									<li><a href="profile.xhtml">Perfil</a></li>
									<li><a href="#" data-reveal-id="dlg-logout">Sair</a></li>
						 		</ul>
						 	</li>
						</h:panelGroup>
				    </ul>
			  	</section>
		  	</nav>
		</div>
		<div class="hide-for-small" style="padding-top: 15px;">
			<a id="header-logo" href="index.xhtml" class="left"> <img
				src="images/reviewit.png" alt="ReviewIt" />
			</a>
			<div id="header-user" class="right">
				<h:panelGroup rendered="#{not userSessionBean.isLogged}">
					<div id="login-register">
						<a href="" data-reveal-id="dlg-login" class="small button">Entrar</a>
						<a href="plans.xhtml" class="small button">Registre-se</a>
					</div>
				</h:panelGroup>
				<h:panelGroup rendered="#{userSessionBean.isLogged}">
					<a href="" class="button img-button" data-dropdown="menu-user">
						<img id="header-user-pic"
						src="data:image/jpg;base64,#{userSessionBean.user.photo}" /> <span
						id="header-user-arrow" class="icon-caret-down"></span>
					</a>
					<ul id="menu-user" class="f-dropdown" data-dropdown-content="">
						<li><a
							href="documents.xhtml?user_id=${userSessionBean.user.id}">Meus
								Documentos</a></li>
						<li><a href="profile.xhtml">Perfil</a></li>
						<li><a href="" data-reveal-id="dlg-logout">Sair</a></li>
					</ul>
				</h:panelGroup>
			</div>
			<nav id="header-nav" class="right">
				<ul class="button-group right">
					<li><h:panelGroup rendered="#{userSessionBean.isLogged}">
							<a href="" data-reveal-id="dlg-upload-doc" class="small button">Enviar
								Documento</a>
						</h:panelGroup></li>
					<li><a href="documents.xhtml" class="small secondary button">Documentos</a></li>
					<li><a href="users.xhtml" class="small secondary button">Usuários</a></li>
				</ul>
				<!-- <div id="select-language">
					<img id="lang-pt" src="images/flag_brazil.png" /> <img id="lang-en"
						src="images/flag_usa.png" />
				</div>
				<form id="form-search" method="post" action="" class="right">
					<div class="row collapse">
						<div class="small-3 large-2 columns">
							<span class="prefix"><i class="icon-search"></i></span>
						</div>
						<div class="small-9 large-10 columns">
							<input type="text" placeholder="Procurar..." />
						</div>
					</div>
				</form> -->
			</nav>
			<hr />
		</div>
	</ui:define>

	<ui:define name="feature">
		<div id="bubble-effect">
			<div class="bubble-effect-layer-1"></div>
			<div class="bubble-effect-layer-2"></div>
			<div class="bubble-effect-layer-3"></div>
			<div class="bubble-effect-shadow"></div>
			
			<div id="slideshow-index" class="row">
				<div class="small-12 small-centered columns">
					<i class="icon-file-text"></i>
					<div>
						<h2>Revisão</h2>
						<h1>Colaborativa</h1>
						<h3>é aqui!</h3>
					</div>
				</div>
			</div>
		</div>

		<div id="content" class="row">
			<div id="how-it-works">
				<h2>Como Funciona?</h2>
				
				<div class="block-steps">
					<div class="steps transition-fast">
						<div class="icon-cloud-upload"></div>
						<h5>Publique seu Documento</h5>
					</div>
					<div class="step-arrow icon-arrow-down show-for-small"></div>
					<div class="step-arrow icon-arrow-right hide-for-small"></div>
					<div class="steps transition-fast">
						<div class="icon-group"></div>
						<h5>Aguarde pelo Feedback da Comunidade</h5>
					</div>
					<div class="step-arrow icon-arrow-down show-for-small"></div>
					<div class="step-arrow icon-arrow-right hide-for-small"></div>
					<div class="steps transition-fast">
						<div class="icon-refresh icon-spin"></div>
						<h5>Atualize seu Documento</h5>
					</div>
				</div>
			</div>
		</div>
	</ui:define>

	<ui:define name="footer">
		<div class="large-10 large-centered columns">
			<div id="footer-copyright" class="left">
				&#169; 2013 <a href="">ReviewIt</a>
			</div>
			<div id="footer-social">
				<a href="" target="_blank"><img src="images/facebook_white.png" /></a>
				<a href="" target="_blank"><img src="images/twitter_white.png" /></a>
			</div>
			<nav id="footer-nav" class="right">
				<a href="">Home</a> | <a href="">Termos</a> | <a href="">Privacidade</a>
				| <a href="">Ajuda</a> | <a href="">Sobre</a>
			</nav>
		</div>
	</ui:define>
</ui:composition>